<template>
  <div class="pending-list">
    <div class="header">
      <router-link to="/main/renshi/zhaoping/process" class="back-btn">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </router-link>
      <h2>待聘名单</h2>
    </div>

    <div class="content">
      <div class="filter-section">
        <el-form :inline="true" :model="filterForm">
          <el-form-item label="应聘职位">
            <el-input v-model="filterForm.position" placeholder="请输入职位"></el-input>
          </el-form-item>
          <el-form-item label="部门">
            <el-select v-model="filterForm.department" placeholder="请选择部门">
              <el-option label="技术部" value="技术部"></el-option>
              <el-option label="销售部" value="销售部"></el-option>
              <el-option label="人事部" value="人事部"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="resetFilter">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table :data="candidateList" style="width: 100%">
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column prop="position" label="应聘职位" width="150"></el-table-column>
        <el-table-column prop="department" label="部门" width="120"></el-table-column>
        <el-table-column prop="interviewDate" label="面试日期" width="180"></el-table-column>
        <el-table-column prop="interviewResult" label="面试结果" width="120">
          <template slot-scope="scope">
            <el-tag type="success">{{ scope.row.interviewResult }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="120">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
            <el-button size="mini" type="success" @click="handleOffer(scope.row)">发放Offer</el-button>
            <el-button size="mini" type="danger" @click="handleReject(scope.row)">放弃</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 候选人详情对话框 -->
    <el-dialog title="候选人详情" :visible.sync="dialogVisible" width="50%">
      <div class="candidate-detail" v-if="currentCandidate">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="姓名">{{ currentCandidate.name }}</el-descriptions-item>
          <el-descriptions-item label="应聘职位">{{ currentCandidate.position }}</el-descriptions-item>
          <el-descriptions-item label="部门">{{ currentCandidate.department }}</el-descriptions-item>
          <el-descriptions-item label="面试日期">{{ currentCandidate.interviewDate }}</el-descriptions-item>
          <el-descriptions-item label="面试结果">{{ currentCandidate.interviewResult }}</el-descriptions-item>
          <el-descriptions-item label="状态">{{ currentCandidate.status }}</el-descriptions-item>
        </el-descriptions>
        
        <div class="interview-feedback">
          <h4>面试评价</h4>
          <p>{{ currentCandidate.feedback }}</p>
        </div>
      </div>
    </el-dialog>

    <!-- Offer发放对话框 -->
    <el-dialog title="发放Offer" :visible.sync="offerDialogVisible" width="40%">
      <el-form :model="offerForm" label-width="100px">
        <el-form-item label="入职日期">
          <el-date-picker v-model="offerForm.entryDate" type="date" placeholder="选择入职日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="薪资待遇">
          <el-input v-model="offerForm.salary" type="number"></el-input>
        </el-form-item>
        <el-form-item label="试用期">
          <el-input-number v-model="offerForm.probationMonths" :min="1" :max="6"></el-input-number>
          <span class="unit">个月</span>
        </el-form-item>
        <el-form-item label="其他说明">
          <el-input type="textarea" v-model="offerForm.remarks" rows="3"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="offerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitOffer">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filterForm: {
        position: '',
        department: ''
      },
      candidateList: [
        {
          id: 1,
          name: '张三',
          position: '前端开发工程师',
          department: '技术部',
          interviewDate: '2024-03-11',
          interviewResult: '通过',
          status: '待发Offer',
          feedback: '技术基础扎实，沟通能力良好，团队协作意识强。'
        }
      ],
      dialogVisible: false,
      currentCandidate: null,
      offerDialogVisible: false,
      offerForm: {
        entryDate: '',
        salary: '',
        probationMonths: 3,
        remarks: ''
      }
    }
  },
  methods: {
    handleSearch() {
      // TODO: 实现筛选逻辑
      this.$message.info('执行查询')
    },
    resetFilter() {
      this.filterForm = {
        position: '',
        department: ''
      }
    },
    getStatusType(status) {
      const map = {
        '待发Offer': 'warning',
        '已发Offer': 'success',
        '已放弃': 'info'
      }
      return map[status] || 'info'
    },
    viewDetail(row) {
      this.currentCandidate = row
      this.dialogVisible = true
    },
    handleOffer(row) {
      this.currentCandidate = row
      this.offerDialogVisible = true
    },
    handleReject(row) {
      this.$confirm('确认放弃该候选人吗？', '提示', {
        type: 'warning'
      }).then(() => {
        row.status = '已放弃'
        this.$message.success('操作成功')
      }).catch(() => {})
    },
    submitOffer() {
      if (!this.offerForm.entryDate || !this.offerForm.salary) {
        this.$message.error('请填写完整信息')
        return
      }
      // TODO: 提交Offer信息
      this.currentCandidate.status = '已发Offer'
      this.$message.success('Offer发放成功')
      this.offerDialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.pending-list {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);

    .filter-section {
      margin-bottom: 20px;
    }
  }

  .interview-feedback {
    margin-top: 20px;

    h4 {
      margin: 0 0 10px;
      color: #303133;
    }

    p {
      margin: 0;
      color: #606266;
      line-height: 1.6;
    }
  }

  .unit {
    margin-left: 10px;
    color: #606266;
  }
}
</style> 